<template>
	<view class="view-content">
		<navBar title="创建险情事件" @goBack="goBack"></navBar>
		<view style="padding: 20rpx 80rpx;">
			<u--form labelPosition="left" :model="formData" ref="form1" labelWidth="auto" class="form">
				<u-form-item label="是否为已入库项目" labelWidth=260 prop="formData.name" borderBottom ref="item1">
					<u-switch v-model="formData.flag" @change="change"></u-switch>
				</u-form-item>
				<template v-if="formData.flag">
					<view class="name-box">
						<view class="pro-name">项目名称</view>
						<view class="right-box" @click="selectProject">
							<view v-if="formData.bizProjectName">
								{{formData.bizProjectName}}/{{formData.sectionName}}/{{formData.siteName}}
							</view>
							<u-icon name="arrow-down" customStyle="marginRight:26rpx;marginLeft:20rpx"></u-icon>
						</view>
					</view>
					<u-form-item label="事件发生时间" labelWidth=100 prop="formData.name" borderBottom ref="item1">
						<dataTimePicker :showDateTimePicker="showDateTimePicker" @confirm="timeConfirm"
							@click.native="showDateTimePicker=true" @cancel="showDateTimePicker=false">
							<view class="data-time-solt">
								<view class="data-time-value">{{formData.time}}</view>
								<u-icon name="close" v-if="formData.time" @click.stop.native="clearTime"></u-icon>
								<u-icon name="arrow-down" v-else></u-icon>
							</view>
						</dataTimePicker>
					</u-form-item>
					<u-form-item label="险情描述" labelWidth=100 prop="formData.dangerousSituation" borderBottom ref="item1">
						<view class="form-item form-item-description">
							<u-textarea v-model="formData.dangerousSituation" placeholder="请输入内容" @blur="inputBlur" confirmType="done"></u-textarea>
							<record class="form-item-icon form-item-icon-voice" @setText="description"></record>
							<image mode="scaleToFill" class="form-item-icon form-item-icon-clear"
							 src="/static/image/login/del1.png" @click="formData.dangerousSituation=''"></image>
						</view>
					</u-form-item>
					<u-form-item label="是否演练" labelWidth=260 prop="formData.isRehearsal" borderBottom ref="item1">
						<u-switch v-model="formData.isRehearsal" @change="changeVal"></u-switch>
					</u-form-item>
				</template>
				<template v-else>
					<u-form-item label="项目名称" labelWidth=100 prop="formData.name" borderBottom ref="item1">
						<u--input placeholder="请输入内容" border="none" clearable
							v-model="formData.bizProjectName"></u--input>
					</u-form-item>
					<u-form-item label="发生时间" labelWidth=100 prop="formData.name" borderBottom ref="item1">
						<dataTimePicker :showDateTimePicker="showDateTimePicker" @confirm="timeConfirm"
							@click.native="showDateTimePicker=true" @cancel="showDateTimePicker=false">
							<view class="data-time-solt">
								<view class="data-time-value">{{formData.time}}</view>
								<u-icon name="close" v-if="formData.time" @click.stop.native="clearTime"></u-icon>
								<u-icon name="arrow-down" v-else></u-icon>
							</view>
						</dataTimePicker>
					</u-form-item>
				</template>
			</u--form>
		</view>
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button :loading="loading" @click="submit"  class="button-primary">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import dataTimePicker from "@/components/dateTimePicker/dateTimePicker"
	import mixin from "@/utils/mixins.js"
	import {
		getCreateEvent
	} from "@/api/emergency/emergencyDispatch.js"
	import mixins from "@/utils/mixins.js"

	export default {
		mixins: [mixins],
		data() {
			return {
				loading: false,
				formData: {
					flag: true,
					isRehearsal: false,
					address: '',
					time: this.getDate2(Date.now())
				},
				showDateTimePicker: false
			}
		},
		components: {
			dataTimePicker,
		},
		mixins: [mixin],
		methods: {
			inputBlur(e){
				this.cursor=e.detail.cursor
			},
			description(text){
				let index=this.cursor||0
				let str=this.formData.dangerousSituation||""
				this.cursor+=text.length
				text=str.slice(0, index) + text + str.slice(index);
				this.$set(this.formData, "dangerousSituation", text)
			},
			//提交
			submit() {
				if(this.loading) return
				this.loading = true
				this.formData.startTime = this.formData.time || ""

				if (this.formData.flag) {
					if (!this.formData.projectCascade || !this.formData.time) {
						this.$message("存在必填项未填写")
						this.loading = false
						return
					}

				} else {
					if (!this.formData.bizProjectName || !this.formData.time) {
						this.$message("存在必填项未填写")
						this.loading = false
						return
					}
				}

				let param = Object.assign({}, this.formData)
				if (!param.flag) {
					param.typeId = 98;
					param.ascription = "临时项目"
				} else {
					param.ascription = "合同项目"
				}

				param.creator = this.$store.getters.userName.name || ""
				param.isRehearsal = param.isRehearsal ? 1 : null
				console.log(param, 'param');
				getCreateEvent(param).then(data => {
					
					if (data.success) {
						let obj = data.result || {}
						this.setActiveEventObj(obj)
						this.$message('创建成功')
						this.loading = false
						uni.switchTab({
							url: "/pages/homePage/homePage"
						})
					}
				})
			},
			setActiveEventObj(obj) {
				this.activeEvent = obj
				let oldData = JSON.parse(uni.getStorageSync("activeEventObj") || "{}")
				let userId = this.$store.getters.userName.id
				oldData[userId] = obj
				uni.setStorageSync("activeEventObj", JSON.stringify(oldData))
			},
			change(val) {
				console.log(val, 'val');
				this.formData.flag = val
				this.formData.bizProjectName = ''
				this.formData.bpId = ''
				this.formData.siteId = ''
			},
			changeVal(val) {
				this.formData.isRehearsal = val
			},
			clearTime() {
				console.log("清空时间")
				this.formData.time = undefined
				this.formData.startTime = undefined
			},
			timeConfirm({
				value
			}) {
				console.log(value, 'value')
				if (value > Number(new Date())) {
					value = Number(new Date())
					uni.showToast({
						icon: "none",
						title: "创建时间不能大于当前时间"
					})
				}
				this.$set(this.formData, "time", this.getDate2(value))
				this.$set(this.formData, "startTime", value)
				this.showDateTimePicker = false
			},
			selectProject() {
				this.$$off(this.$config.ENV_SELECT_PROJECT)
				this.$$on(this.$config.ENV_SELECT_PROJECT, res => {
					let obj = {
						bpId: res[0].id,
						bizProjectName: res[0].name,
						sectionName: res[1].name,
						siteId: res[2].id,
						siteName: res[2].name,
						projectCascade: `${res[0].name}/${res[1].name}/${res[2].name}`,
						projectIds: [res[0].id, res[1].id, res[2].id]
					}
					this.formData = Object.assign({}, this.formData, obj)
				});
				uni.navigateTo({
					url: "/subpackage-emergency/pages/selectProject"
				})
			},

			// 返回上一级
			goBack(url) {
				uni.switchTab({
					url: url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.view-content {
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;
		/* #endif */
	}

	.data-time-solt {
		height: 40rpx;
		position: relative;
		width: 100%;
		box-sizing: border-box;

		.scroll-box {
			max-height: calc(100vh - 160rpx);
			padding-top: 10rpx;

			.btn {
				margin-top: 20rpx;
			}
		}

		/deep/ .u-icon--right {
			display: inline-block;
			position: absolute;
			top: 0;
			right: 15rpx;
			width: 32rpx;
			height: 32rpx;

			.u-icon__icon {
				position: absolute;
				top: 5rpx;
				right: 15rpx;
			}
		}
	}

	.right-input {
		/deep/ .u-input {
			max-width: 465rpx;

			input {
				max-width: 390rpx;
				text-align: right !important;
				padding-right: 20rpx;

			}
		}

		/deep/ .data-time-solt {
			text-align: right;
			padding-right: 102rpx;
		}
	}

	.name-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 20rpx 0;
		border-bottom: 1px solid #eeeeef;

		.pro-name {
			width: 320rpx;
		}

		.right-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// flex: 1;
		}
	}

	.data-time-value.proName {
		text-align: left;
	}
	.form-item-description {
		position: relative;
		.form-item-icon {
			width: 48rpx;
			height: 48rpx;
		}

		.form-item-icon-voice {
			position: absolute;
			z-index: 3;
			top: 10rpx;
			right: 16rpx;
			
		}
		.form-item-icon-clear{
			position: absolute;
			z-index: 2;
			right: 16rpx;
			bottom: 10rpx;
		}
	}
</style>